<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Stacked Blocks</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Set canvas dimensions and center
        const canvasWidth = canvas.width;
        const canvasHeight = canvas.height;
        const centerX = canvasWidth / 2;
        
        // Define block properties
        const sideYi = 160; // Side length of block Yi
        const sideJia = sideYi / 2; // Side length of block Jia
        
        // Define positions
        const groundY = 320;
        
        // Block Yi position
        const yiX = centerX - sideYi / 2;
        const yiY = groundY - sideYi;
        
        // Block Jia position
        const jiaX = centerX - sideJia / 2;
        const jiaY = yiY - sideJia;

        // --- Drawing ---

        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        // Draw ground
        ctx.beginPath();
        ctx.moveTo(50, groundY);
        ctx.lineTo(400, groundY);
        ctx.stroke();

        // Draw ground hatches
        ctx.lineWidth = 1.5;
        for (let i = 60; i < 400; i += 20) {
            ctx.beginPath();
            ctx.moveTo(i, groundY);
            ctx.lineTo(i - 15, groundY + 15);
            ctx.stroke();
        }

        // Draw block Yi
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.rect(yiX, yiY, sideYi, sideYi);
        ctx.stroke();

        // Draw block Jia
        ctx.beginPath();
        ctx.rect(jiaX, jiaY, sideJia, sideJia);
        ctx.stroke();
        
        // Draw labels
        ctx.fillStyle = 'black';
        ctx.font = '48px KaiTi'; // Using a font that supports Chinese characters well
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Label Jia
        const jiaCenterX = jiaX + sideJia / 2;
        const jiaCenterY = jiaY + sideJia / 2;
        ctx.fillText('甲', jiaCenterX, jiaCenterY);
        
        // Label Yi
        const yiCenterX = yiX + sideYi / 2;
        const yiCenterY = yiY + sideYi / 2;
        ctx.fillText('乙', yiCenterX, yiCenterY);

    </script>
</body>
</html>